<template>
  <view class="container">
    <view class="heders"> 股票信息 </view>
    <view class="titles">
      <text>股票标的</text>
      <text class="needRedColor">{{ info.name }}</text>
    </view>
    <view class="titles">
      <text>最新价</text>
      <text class="needRedColor">----</text>
    </view>
    <view class="heders"> 选择信息 </view>
    <view class="titles">
      <text>名义本金</text>
      <text class="needWhiteColor">{{ bigInfo.name }}</text>
    </view>
    <view class="titles">
      <text>管理期限</text>
      <text class="needWhiteColor"></text>
    </view>
    <view
      v-for="(item, index) in datr"
      :key="index"
      class="chooseOptions"
      @click="chooseClickMethods(item)"
    >
      <view class="left">
        <text>期限：</text><text class="needRedColor">{{ item.name }}</text>
      </view>
      <view class="middle">
        <text>权利金比例：</text
        ><text class="needRedColor">{{ item.ratio }}%</text>
      </view>
      <view class="right">
        <!-- <input type="checkbox" /> -->
        <image
          src="/static/icon_choose_default.png"
          mode=""
          v-if="item.id !== chooseClickId"
        ></image>
        <image
          src="/static/icon_choose.png"
          mode=""
          v-if="item.id == chooseClickId"
        ></image>
      </view>
    </view>

    <view class="markBig">
      <view class="mark-title"> 市值规模 </view>
      <view class="mark-options">
        <view
          v-for="(item, index) in big"
          :key="index"
          class="everys"
          @click="bigChooseHandle(item)"
          :class="bigChoose == item.id ? 'everyClick' : ''"
        >
          {{ item.name }}
        </view>
      </view>
      <view class="inputMoney">
        <input
          type="number"
          placeholder="请输入其他市值规模"
          v-model="newBig"
        />
        <text>万元</text>
      </view>
      <view class="btn-area">
        <text @click="canNewBigs">取消</text>
        <text class="needRed" @click="setNewBigs">确定</text>
      </view>
    </view>

    <view class="heders"> 一次性收取权利金 </view>
    <view class="titles">
      <text>需缴纳权利金</text>
      <text class="needRedColor">
        {{ (datrInfo.ratio * bigInfo.value) / 100 }}
      </text>
    </view>
    <view class="sureBuy" @click="applyBuy"> 申请认购 </view>

    <!-- 确认认购弹窗 -->
    <u-popup v-model="show" mode="center" width="536rpx" border-radius="10">
      <view class="pop-title">
        <text></text>
        <text>询价结果</text>
        <text class="turnoff" @click="turnOffDialog">
          <image src="/static/icon_pop_delete.png" mode=""></image>
        </text>
      </view>
      <view class="bottoms">
        <text class="left-name">标的股票：</text>
        <text class="rightS">{{ info.name }}</text>
      </view>
      <view class="bottoms">
        <text class="left-name">名义本金：</text>
        <text class="rightS">{{ bigInfo.value }}</text>
      </view>
      <view class="bottoms">
        <text class="left-name">行权周期：</text>
        <text class="rightS">{{ datrInfo.name }}</text>
      </view>
      <view class="bottoms">
        <text class="left-name">买入方式：</text>
        <text class="rightS">--</text>
      </view>
      <view class="bottoms">
        <text class="left-name">投资回报：</text>
        <text class="rightS">--</text>
      </view>
      <view class="bottoms">
        <text class="left-name">权利金：</text>
        <text class="rightS">
          {{ (datrInfo.ratio * bigInfo.value) / 100 }}</text
        >
      </view>
      <view class="bottoms">
        <text class="left-name">账户余额：</text>
        <text class="rightS">0</text>
      </view>

      <view class="agree-rules">
        点击“立即认购”代表您已经充分了解并同意
        <text class="needRed">《用户须知及风险提示》</text>
      </view>
      <view class="buy-now" @click="buyNowClick"> 立即认购 </view>
    </u-popup>

    <!-- 支付弹窗 -->
    <u-popup v-model="payshow" mode="center" border-radius="10">
      <view class="pay-head">
        <text></text>
        <text>请输入结算密码</text>
        <image
          src="/static/icon_pop_delete.png"
          mode=""
          @click="turnOffPayMoney"
        ></image>
      </view>
      <view class="pay-name"> {{ info.name }} </view>
      <view class="pay-number">
        <u-message-input
          width="70"
          @change="change"
          @finish="finish"
          :maxlength="maxlength"
        ></u-message-input>
      </view>
    </u-popup>

    <!-- 支付结果-成功 -->
    <u-popup v-model="paySuccess" mode="center" border-radius="10">
      <view class="payStatus">
        <image src="/static/icon_success.png"></image>
        <view @click="onLocation">支付成功！</view>
      </view>
    </u-popup>
    <u-popup v-model="payErr" mode="center" border-radius="10">
      <view class="payStatus">
        <image src="/static/icon_fail.png"></image>
        <view>支付失败！</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ids: 0,
      info: [],
      datr: [],
      datrInfo: [],
      chooseClickId: 0,
      big: [],
      bigInfo: [],
      bigChoose: 0,
      newBig: 0,
      // 支付弹窗
      maxlength: 6,
      payshow: true,
      // 认购弹出层
      show: false,
      //支付弹窗
      payshow: false,
      // 支付结果
      paySuccess: false,
      payErr: false,
    };
  },
  onLoad(opt) {
    this.ids = opt.id;
  },
  onShow() {
    var that = this;
    var value = uni.getStorageSync("poxer_ssid");
    var param = { uid: value, rep_id: that.ids };
    /////
    that._post("Works/pre_vanilla", param, function (res) {
      if (res.status != "1") {
        return;
      }
      that.info = res.data;
      that.datr = res.data.date_ratio;
      that.datrInfo = that.datr[0];
      that.chooseClickId = that.datr[0].id;
      ////
      that.big = res.data.monlist;
      that.bigInfo = that.big[0];
      that.bigChoose = that.bigInfo.id;
    });
  },
  methods: {
    // 被点击的单选框，脚标赋值
    chooseClickMethods(item) {
      //console.log(item);
      this.chooseClickId = item.id;
      this.datrInfo = item;
    },
    // 规模大小选择
    bigChooseHandle(item) {
      this.bigChoose = item.id;
      this.bigInfo = item;
    },
    /**
     * 设置新金额
     */
    setNewBigs() {
      var that = this;
      var money = that.newBig;
      if (money < 10000) {
        return uni.showModal({
          showCancel: false,
          content: "请输入至少10000元以上金额",
        });
      }
      ////////////////////////////////////
      var newBig = {
        id: 0,
        name: parseInt(money / 10000) + "W",
        value: money,
      };
      that.bigInfo = newBig;
      that.bigChoose = 0;
    },
    //取消新金额
    canNewBigs() {
      this.newBig = 0;
    },
    // 申请认购
    applyBuy() {
      this.show = true;
    },
    turnOffDialog() {
      this.show = false;
    },
    // 密码输入框的输入事件
    change(e) {
      console.log("内容改变，当前值为：" + e);
    },
    finish(e) {
      var that = this;
      var value = uni.getStorageSync("poxer_ssid");
      var param = {
        uid: value,
        v_id: that.ids,
        month: that.datrInfo.id,
        money: that.bigInfo.value,
        pass: e,
      };
      that.turnOffPayMoney();
      ///////////////////////////////////////////////
      that._post("Works/work_vanilla", param, function (res) {
        if (res.status != "1") {
          return;
        }
        that.paySuccess = 1;
      });
    },
    onLocation() {
      uni.switchTab({
        url: "/pages/mine/mine",
      });
    },
    // 立即认购
    buyNowClick() {
      this.show = false;
      this.payshow = true;
    },
    // 关闭支付弹窗
    turnOffPayMoney() {
      this.payshow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #000000;
  width: 750rpx;
  height: auto;
  padding-bottom: 40rpx;

  // 公用样式
  .needRedColor {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #db1414;
  }

  // 公用样式
  .needWhiteColor {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }

  .heders {
    width: 100%;
    height: 94rpx;
    box-sizing: border-box;
    padding-left: 18rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
  }

  .titles {
    box-sizing: border-box;
    padding-left: 29rpx;
    padding-right: 29rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 78rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #aaaaaa;
    background: #242426;
    margin-top: 3rpx;
  }

  // 每一个选择
  .chooseOptions {
    // border: 1px solid red;
    display: flex;
    box-sizing: border-box;
    padding-left: 29rpx;
    padding-right: 29rpx;
    width: 100%;
    height: 81rpx;
    display: flex;
    justify-content: space-between;

    // align-items: center;
    .left {
      width: 30%;
      display: flex;

      align-items: center;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }

    .middle {
      width: 60%;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }

    .right {
      width: 50rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      image {
        width: 40rpx !important;
        height: 40rpx !important;
        // border: 1px solid #AAAAAA;
        border-radius: 50%;
        box-sizing: border-box;
      }
    }
  }

  .markBig {
    margin-top: 38rpx;
    height: auto;
    box-sizing: border-box;
    padding: 40rpx 75rpx;

    .mark-title {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
      margin-bottom: 45rpx;
    }

    .mark-options {
      width: 100%;
      height: 200rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .everys {
        width: 180rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #aaaaaa;
        border-radius: 10rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
      }

      .everyClick {
        width: 180rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #db1414;
        border-radius: 10rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
      }
    }

    .inputMoney {
      width: 600rpx;
      height: 60rpx;
      line-height: 60rpx;
      margin-top: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #aaaaaa;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      box-sizing: border-box;
      padding-left: 20rpx;
      padding-right: 20rpx;
      border-radius: 10rpx;

      input {
        width: 80%;
        box-sizing: border-box;
        padding-left: 20rpx;
        padding-right: 20rpx;
      }
    }

    .btn-area {
      margin-top: 30rpx;
      display: flex;
      justify-content: space-between;

      text {
        display: inline-block;
        width: 270rpx;
        height: 70rpx;
        background: #aaaaaa;
        border-radius: 10rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .needRed {
        background: #db1414;
      }
    }
  }

  .sureBuy {
    width: 748rpx;
    height: 98rpx;
    background: #db1414;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 47rpx;
  }

  // 弹出层央视
  .pop-title {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #aaaaaa;
    height: 92rpx;
    display: flex;
    box-sizing: border-box;
    padding-left: 30rpx;
    padding-right: 30rpx;
    justify-content: space-between;
    align-items: center;

    .turnoff {
      width: 32rpx;
      height: 32rpx;
      font-size: 32rpx;
      display: inline-block;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #aaaaaa;
      border-radius: 32rpx;

      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .bottoms {
    width: 100%;
    padding-left: 30rpx;
    padding-right: 30rpx;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;

    .left-name {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #aaaaaa;
      width: 150rpx;
      text-align: end;
    }

    .rightS {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #0e0e0e;
    }
  }

  .agree-rules {
    height: auto;
    font-size: 20rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #aaaaaa;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 30rpx;
    padding: 0rpx 30rpx;

    .needRed {
      color: #f27272;
    }
  }

  .buy-now {
    width: 460rpx;
    height: 70rpx;
    background: linear-gradient(0deg, #ff7672, #f8354b);
    border-radius: 10rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30rpx;
  }

  // 支付弹窗
  .pay-head {
    width: 613rpx;
    height: 112rpx;
    box-sizing: border-box;
    padding-left: 32rpx;
    padding-right: 32rpx;
    display: flex;
    justify-content: space-between;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #0e0e0e;
    align-items: center;
    border-bottom: 1px solid #efefef;

    image {
      width: 32rpx;
      height: 32rpx;
    }
  }

  .pay-name {
    width: 613rpx;
    height: 132rpx;
    box-sizing: border-box;
    padding-left: 32rpx;
    padding-right: 32rpx;
    display: flex;
    justify-content: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #0e0e0e;
    align-items: center;
    border-bottom: 1px solid #efefef;
  }

  .pay-number {
    width: 613rpx;
    height: 132rpx;
    box-sizing: border-box;
    padding-left: 32rpx;
    padding-right: 32rpx;
    display: flex;
    align-items: center;

    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #0e0e0e;
    align-items: center;
    border-bottom: 1px solid #efefef;
    margin-bottom: 65rpx;
  }

  // 支付状态
  .payStatus {
    width: 360rpx;
    height: 220rpx;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #0e0e0e;

    image {
      width: 66rpx;
      height: 66rpx;
      margin-bottom: 28rpx;
    }
  }
}
</style>
